<template>
  <div>
    <div style="width: 100%; background-color: #ffffff">
      <!-- <template #extra> -->
      <a-card id="content-area" style="height: 700px; overflow: scroll; overflow-y: auto">
        <span style="font-size: 20px; font-weight: 700; margin-left: 10px; margin-top: 10px">我的企业</span>
        <a-button type="primary" style="float: right" @click="showCreateModal">创建企业</a-button>
        <!-- </template> -->
        <a-modal v-model:open="open" :title="modalTitle" @ok="handleOk" width="70">
          <!-- 企业名称 -->
          <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row>
              <a-col :span="12">
                <a-form-item label="企业名称" name="name" :rules="[{ required: true, message: '请输入企业名称' }]">
                  <a-input v-model:value="formState.name" placeholder="请输入企业名称" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 所属行业 -->
                <a-form-item label="所属行业" name="industry" :rules="[{ required: true, message: '请选择所属行业' }]">
                  <a-select v-model:value="formState.industry" placeholder="请选择所属行业">
                    <a-select-option :value="1">工业互联网</a-select-option>
                    <a-select-option :value="2">智慧农业</a-select-option>
                    <a-select-option :value="3">教育</a-select-option>
                    <a-select-option :value="4">新能源</a-select-option>
                    <a-select-option :value="5">智能制造</a-select-option>
                    <a-select-option :value="6">智慧城市</a-select-option>
                    <a-select-option :value="7">智慧医疗</a-select-option>
                    <a-select-option :value="8">其他领域</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 地址 -->
                <a-form-item label="地址" name="address" :rules="[{ required: true, message: '请输入地址' }]">
                  <a-input v-model:value="formState.address" placeholder="请输入地址" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 经度 -->
                <a-form-item label="经度" :rules="[{ required: true, message: '请输入经度' }]">
                  <a-input v-model:value="formState.longitude" placeholder="请输入经度" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 纬度 -->
                <a-form-item label="纬度" :rules="[{ required: true, message: '请输入纬度' }]">
                  <a-input v-model:value="formState.latitude" placeholder="请输入纬度" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 社会信用代码 -->
                <a-form-item label="社会信用代码" :rules="[{ required: true, message: '请输入社会信用代码' }]">
                  <a-input v-model:value="formState.socialCreditCode" placeholder="请输入社会信用代码" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 编码 -->
                <a-form-item label="编码" :rules="[{ required: true, message: '请输入编码' }]">
                  <a-input v-model:value="formState.code" placeholder="请输入编码" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 区县 -->
                <a-form-item label="区县" :rules="[{ required: true, message: '请输入区县' }]">
                  <a-input v-model:value="formState.district" placeholder="请输入区县" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 街道 -->
                <a-form-item label="街道" :rules="[{ required: true, message: '请输入街道' }]">
                  <a-input v-model:value="formState.townshipId" placeholder="请输入街道" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 联系人 -->
                <a-form-item label="联系人" :rules="[{ required: true, message: '请输入联系人' }]">
                  <a-input v-model:value="formState.contactPerson" placeholder="请输入联系人" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 联系电话 -->
                <a-form-item label="联系电话" :rules="[{ required: true, message: '请输入联系电话' }]">
                  <a-input v-model:value="formState.contactNumber" placeholder="请输入联系电话" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 备注 -->
                <a-form-item label="备注">
                  <a-input v-model:value="formState.remarks" placeholder="请输入备注" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 法人状态 -->
                <a-form-item label="法人状态" :rules="[{ required: true, message: '请选择法人状态' }]">
                  <a-select v-model:value="formState.legalPersonStatus" placeholder="请选择法人状态">
                    <a-select-option value="确立">确立</a-select-option>
                    <a-select-option value="注销">注销</a-select-option>
                    <a-select-option value="吊销">吊销</a-select-option>
                    <a-select-option value="无">无</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <!-- 法人名称 -->
                <a-form-item label="法人名称" :rules="[{ required: true, message: '请输入法人名称' }]">
                  <a-input v-model:value="formState.legalPersonName" placeholder="请输入法人名称" />
                </a-form-item>
                <a-form-item label="项目描述" name="description" placeholder="请输入项目描述">
                  <a-textarea v-model:value="formState.description" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-modal>
        <!-- ------------------------------------------------ -->
        <a-row :gutter="16">
          <a-col v-for="(project, index) in projectList" :key="index" :span="12" :push="1" style="margin-top: 10px">
            <div
              hoverable
              :title="project.name"
              @click="CardtoHome( project.ProjectInfo)"
              class="clickable-div"
              style="width: 700px; height: 230px; border: 1px solid #e0e0e0; border-radius: 5px"
            >
              <p style="font-weight: bold; font-weight: 700; font-size: 18px; margin-left: 15px">{{ project.ProjectInfo.description }}</p>
              <p style="font-size: 18px; margin-left: 15px; margin-top: 5px">{{ project.ProjectInfo.name }}</p>
              <div style="display: flex">
                <div style="margin-left: 30px">
                  <p style="color: #a1a6ab">设备总数</p>
                  <p style="font-weight: 700; font-size: 18px">{{ project.DeviceCount }}</p>
                </div>
                <div style="margin-left: 180px">
                  <p style="color: #a1a6ab">应用总数</p>
                  <p style="font-weight: 700; font-size: 18px">{{ project.AppCount }}</p>
                </div>
                <div style="margin-left: 150px">
                  <p style="color: #a1a6ab">设备离线总数</p>
                  <p style="font-weight: 700; font-size: 18px">{{ project.DeviceOffCount }}</p>
                </div>
              </div>
              <div style="display: flex">
                <div style="margin-left: 15px">
                  <span style="color: #a1a6ab">创建时间: </span>
                  <span>{{ project.ProjectInfo.CreatedAt }}</span>
                </div>
                <div style="margin-left: 10px">
                  <span style="color: #a1a6ab">创建时人: </span>
                  <span>{{ project.ProjectInfo.creator }} </span>
                </div>
                <EditOutlined style="margin-left: 200px; color: #1677ff; font-size: 18px" @click.stop="openEditModal(project.ProjectInfo.uuid)" />
                <a-popconfirm
                  title="崇明教育局"
                  ok-text="确认"
                  cancel-text="取消"
                  description="你确定要删除此项目吗?"
                  @confirm="confirm(project.ProjectInfo.ID)"
                  @cancel="cancel"
                  @click.stop
                >
                  <DeleteOutlined style="margin-left: 10px; color: red; font-size: 18px" />
                </a-popconfirm>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script setup>
  import { projectApi } from '/@/api/system/project-api';
  import { ref, onMounted, reactive } from 'vue';
  import { message } from 'ant-design-vue';
  import { localRead } from '/@/utils/local-util.js';
  import { useRouter, useRoute } from 'vue-router';

  const projectList = ref([]);
  function getProjectList() {
    projectApi.getProjectList().then((res) => {
      console.log(res);
      projectList.value = res.list;
    });
  }

  // 企业跳转首页
  const router = useRouter();
  const route = useRoute(); // 获取当前路由对象
  const { uname, uuid } = route.query; 
const CardtoHome = (val) => {
    
    router.push({
      path: '/home', 
      query: { uname: val.name, uuid: val.uuid },
    });
   
  };
  // -----------------------企业删除---------------------------------
  const confirm = (id) => {
    projectApi
      .delete(id)
      .then(() => {
        message.success('删除成功');
        getProjectList();
      })
      .catch((error) => {
        message.error('删除失败');
      });
};
  // -------------查询传参-----------------
  const formRef = ref();
  const formState = reactive({
    id: undefined,
    name: undefined, //企业名称
    industry: undefined, //所属行业
    description: undefined, //描述
    creator: undefined, //超级管理员
    creatorUuid: undefined,
    address: undefined, //地址
    longitude: undefined, //经度
    latitude: undefined, //纬度
    socialCreditCode: undefined, //社会信用代码
    code: undefined, //编码
    district: undefined, //区县
    townshipId: undefined, //街道
    contactPerson: undefined, //联系人
    contactNumber: undefined, //联系电话
    remarks: undefined, //备注
    pollutionPermit: undefined, //排污许可
    legalPersonStatus: undefined, //法人状态
    legalPersonName: undefined, //法人名称
  });
  const open = ref(false);
  const modalTitle = ref();
  const labelCol = { span: 6 };
  const wrapperCol = { span: 14 };
  // 创建项目弹框
  const showCreateModal = () => {
    modalTitle.value = '创建企业';
    // 清空表单数据
    formState.name = '';
    formState.industry = '';
    formState.description = '';
    formState.creator = '';
    formState.creatorUuid = '';
    formState.address = '';
    formState.longitude = '';
    formState.latitude = '';
    formState.socialCreditCode = '';
    formState.code = '';
    formState.district = '';
    formState.townshipId = '';
    formState.contactPerson = '';
    formState.contactNumber = '';
    formState.pollutionPermit = '';
    formState.remarks = '';
    formState.legalPersonStatus = '';
    formState.legalPersonName = '';
    open.value = true;
  };
  // 编辑项目弹框
  const openEditModal = (uuid) => {
    modalTitle.value = '编辑企业';
    let obj = {
      uuid: uuid,
    };
    open.value = true;
    projectApi
      .getByUuid(obj)
      .then((res) => {
        console.log(res.data);
        if (res && res.data) {
          formState.id = res.data.id;
          formState.name = res.data.name; //企业名称
          (formState.industry = res.data.industry), //所属行业
            (formState.description = res.data.description), //描述
            (formState.creator = res.data.creator), //超级管理员
            (formState.creatorUuid = res.data.creatorUuid),
            (formState.address = res.data.address), //地址
            (formState.longitude = res.data.longitude), //经度
            (formState.latitude = res.data.latitude), //纬度
            (formState.socialCreditCode = res.data.socialCreditCode), //社会信用代码
            (formState.code = res.data.code), //编码
            (formState.district = res.data.district), //区县
            (formState.townshipId = res.data.townshipId), //街道
            (formState.contactPerson = res.data.contactPerson), //联系人
            (formState.contactNumber = res.data.contactNumber), //联系电话
            (formState.remarks = res.data.remarks), //备注
            (formState.pollutionPermit = res.data.pollutionPermit), //排污许可
            (formState.legalPersonStatus = res.data.legalPersonStatus), //法人状态
            (formState.legalPersonName = res.data.legalPersonName); //法人名称
        } else {
          console.error('获取项目数据失败');
        }
      })
      .catch((error) => {
        console.error('请求接口失败', error);
      });
  };
  // 提交表单的处理函数
  const handleOk = (e) => {
    if (modalTitle.value === '创建企业') {
      createProject(formState);
    } else if (modalTitle.value === '编辑企业') {
      editProject(formState);
    }
  };
  // 创建项目的函数
  const createProject = (formState) => {
    // 把登录时uname；uuid保存传过去
    formState.creator = localRead('uname');
    formState.creatorUuid = localRead('uuid');
    projectApi
      .add(formState)
      .then((res) => {
        message.success('企业新建成功');
        open.value = false;
        getProjectList();
      })
      .catch((error) => {
        message.error('企业新建失败');
      });
  };
  // 编辑项目的函数
  const editProject = (formState) => {
    projectApi
      .update(formState)
      .then((res) => {
        message.success('企业编辑成功');
        open.value = false;
        getProjectList();
      })
      .catch((error) => {
        message.error('企业编辑失败');
      });
  };

  // -----------初始化----------------------
  onMounted(() => {
    getProjectList();
  });
</script>

<style lang="scss" scoped>
  .clickable-div {
    cursor: pointer; //鼠标悬停时显示手型形状
    background: #ffff;
  }
  .clickable-div:hover {
    background: #edf7ff;
  }
</style>
